.root {
  width: 100%;
  position: relative;

  > div {
    cursor: pointer;
  }
}

.input_wrap {
  input {
    pointer-events: none;
  }
}

.root_open {
  .arrow {
    opacity: 1;
    transform: rotate(180deg);

    svg {
      color: var(--clr-primary);
    }
  }

  input + span::before {
    opacity: 1;
  }
}

.arrow {
  position: absolute;
  top: 4px;
  right: 3px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.2s ease;
  opacity: 0.5;

  svg {
    transition: 0.2s ease;
    color: var(--clr-black);
  }
}
